<template>
  <div class="personal-content front-color">
    <div class="title clearfix">
      <h3 class="page-title">{{showTitle}}</h3>
      <span class="back pointer" @click="goBack">< {{$t('myAdd.personal.back')}}</span>
    </div>
    <div class="form-box">
      <!-- 设置交易密码 -->
      <template v-if="!setOrChange">
        <template v-for="(item,key,index) in setFormList">
          <inline-input
            v-bind:property = "item"
            v-model = "item.value"
            v-on:onevents = "somethings"
            @textOrPassword="textOrPassword">
          </inline-input>
        </template>
      </template>
      <!-- 修改交易密码 -->
      <template v-else>
        <template v-for="(item,key,index) in formList">
          <inline-input
            v-bind:property = "item"
            v-model = "item.value"
            v-on:onevents = "somethings"
            @textOrPassword="textOrPassword">
          </inline-input>
        </template>
      </template>
      <div class="button-inline">
        <button @click="submit" :class="{readOnly: !secondClick}">{{submitText}}</button>
      </div>
    </div>
    <p v-if='userinfo'><span v-if="operationType"></span></p>
  </div>
</template>

<script>
  /*
  *  短信类型： 设置交易密码   忘记交易密码 : 28
  * */
  import InlineInput from '@/components/common/inlineInput'
  import {mapState} from 'vuex'
  export default {
    name: 'setExPassW',
    components: {
      InlineInput
    },
    data () {
      return {
        formList: {},
        setFormList: {},
        setOrChange: 0,
        SetCapitalPassword: null, // 设置交易密码短信类型
        UpdateCapitalPassword: null, // 修改交易密码短信类型
        secondClick: true
      }
    },
    mounted () {
      this.formList = this.formList_obj
      this.setFormList = this.setFormList_obj
      this.UpdateCapitalPassword = this.operationType.UpdateCapitalPassword
      this.SetCapitalPassword = this.operationType.SetCapitalPassword
    },
    computed: {
      ...mapState({
        userinfo ({baseData: {_user}}) {
          if (_user) {
            this.setOrChange = _user.ifSetExchangePwd
            return _user
          } else {
            return false
          }
        },
        operationType ({operationType}) {
          if (operationType) {
            return operationType
          } else {
            return false
          }
        }
      }),
      Internationalization () {
        return {
          exPassW: this.$t('myAdd.setExPassW.exPassW'), // 交易密码
          newPassW: this.$t('myAdd.setExPassW.newPassW'), // 新交易密码
          smsVerCode: this.$t('myAdd.setExPassW.smsVerCode'), // 短信验证码
          googleCode: this.$t('myAdd.setExPassW.googleCode'), // 谷歌验证码
          submit: this.$t('myAdd.setExPassW.submit'), // 提交
          change: this.$t('myAdd.setExPassW.change'), // 重置
          passCode: this.$t('myAdd.setExPassW.passCode'), // 验证码已发送
          mustSixNum: this.$t('myAdd.setExPassW.mustSixNum'), // 交易密码必须是6位数字
          setTitle: this.$t('myAdd.setExPassW.setTitle'), // 设置交易密码
          changeTitle: this.$t('myAdd.setExPassW.changeTitle'), // 修改交易密码
          googleVerify: this.$t('myAdd.setExPassW.googleVerify'), // 谷歌验证
          enterGoogleVerify: this.$t('myAdd.setExPassW.enterGoogleVerify'), // 请输入谷歌验证码
          emailVerify: this.$t('myAdd.setExPassW.emailVerify'), // 邮箱验证
          enterEmailVerify: this.$t('myAdd.setExPassW.enterEmailVerify'), // 请输入邮箱验证码
          enterSmsVerCode: this.$t('myAdd.setExPassW.enterSmsVerCode'), // 请输入短信验证码
          oldExPassW: this.$t('myAdd.setExPassW.oldExPassW'), // 请输入短信验证码
          enterNewSixExpassW: this.$t('myAdd.setExPassW.enterNewSixExpassW'), // 输入新的6位数字交易密码
          loginPwd: this.$t('myAdd.setExPassW.loginPwd'), // 登陆密码
          enterLoginPwd: this.$t('myAdd.setExPassW.enterLoginPwd') // 输入平台账户的登陆密码
        }
      },
      showTitle () {
        return this.setOrChange ? this.Internationalization.changeTitle : this.Internationalization.setTitle
      },
      formList_obj () {
        let self = this
        let obj = {
          loginPwd: {
            title: this.Internationalization.loginPwd,
            placeholder: this.Internationalization.enterLoginPwd,
            formType: 'password',
            type: null,
            name: 'loginPwd',
            value: null,
            isShowEye: true
          },
          newExPword: {
            title: this.Internationalization.newPassW,
            placeholder: this.Internationalization.enterNewSixExpassW,
            formType: 'password',
            type: null,
            name: 'newExPword',
            value: null,
            isShowEye: true
          }
        }
        if (this.userinfo.googleStatus === 1) {
          Object.assign(obj, {
            googleCode: {
              title: this.Internationalization.googleVerify,
              placeholder: this.Internationalization.enterGoogleVerify,
              formType: 'text',
              type: null,
              name: 'googleCode',
              keyupEnter: function (argument) {
                self.submit()
              },
              value: ''
            }
          })
        } else if (this.userinfo.isOpenMobileCheck === 1) {
          Object.assign(obj, {
            smsAuthCode: {
              title: this.$t('personal.smsAuthCode'),
              placeholder: this.Internationalization.enterSmsVerCode,
              formType: 'verifiCode',
              name: 'smsAuthCode',
              operationType: this.UpdateCapitalPassword, // 修改交易密码类型
              startTime: false,
              data: ['aliyunCapcha'],
              keyupEnter: function (argument) {
                self.submit()
              },
              value: null
            }
          })
        } else if (this.userinfo.email) {
          // publicInfo 接口里面 没有关于 是否开启邮箱验证的字段返回
          Object.assign(obj, {
            emailValidCode: {
              title: this.Internationalization.emailVerify,
              placeholder: this.Internationalization.enterEmailVerify,
              formType: 'verifiCode',
              name: 'emailValidCode',
              // 庞宇晓说 这里的邮箱验证码类型 跟  短信时一样得
              operationType: this.UpdateCapitalPassword,
              startTime: false,
              data: ['aliyunCapcha', 'email'],
              focus: true,
              keyupEnter: function (argument) {
                self.submit()
              },
              value: null
            }
          })
        }
        return obj
      },
      setFormList_obj () {
        let self = this
        let obj = {
          newExPword: {
            title: this.Internationalization.newPassW,
            placeholder: this.Internationalization.enterNewSixExpassW,
            formType: 'password',
            type: null,
            name: 'newExPword',
            value: null,
            isShowEye: true
          }
        }
        if (this.userinfo.googleStatus === 1) {
          Object.assign(obj, {
            googleCode: {
              title: this.Internationalization.googleVerify,
              placeholder: this.Internationalization.enterGoogleVerify,
              formType: 'text',
              type: null,
              name: 'googleCode',
              keyupEnter: function (argument) {
                self.submit()
              },
              value: ''
            }
          })
        } else if (this.userinfo.isOpenMobileCheck === 1) {
          Object.assign(obj, {
            smsAuthCode: {
              title: this.$t('personal.smsAuthCode'),
              placeholder: this.Internationalization.enterSmsVerCode,
              formType: 'verifiCode',
              name: 'smsAuthCode',
              operationType: this.SetCapitalPassword, // 设置交易密码类型
              startTime: false,
              data: ['aliyunCapcha'],
              keyupEnter: function (argument) {
                self.submit()
              },
              value: null
            }
          })
        } else if (this.userinfo.email) {
          // publicInfo 接口里面 没有关于 是否开启邮箱验证的字段返回
          Object.assign(obj, {
            emailValidCode: {
              title: this.Internationalization.emailVerify,
              placeholder: this.Internationalization.enterEmailVerify,
              formType: 'verifiCode',
              name: 'emailValidCode',
              // 庞宇晓说 这里的邮箱验证码类型 跟  短信时一样得
              operationType: this.SetCapitalPassword,
              startTime: false,
              data: ['aliyunCapcha', 'email'],
              focus: true,
              keyupEnter: function (argument) {
                self.submit()
              },
              value: null
            }
          })
        }
        return obj
      },
      sendUrl () {
        return this.setOrChange ? this.$store.state.url.transactionUrl.change_exchange_password : this.$store.state.url.transactionUrl.set_exchange_password
      },
      submitText () {
        return this.setOrChange ? this.Internationalization.change : this.Internationalization.submit
      }
    },
    watch: {
      'userinfo' () {
        this.formList = this.formList_obj
        this.setFormList = this.setFormList_obj
      },
      'formList_obj' (val) {
        this.formList = val
      },
      'setFormList_obj' (val) {
        this.setFormList = val
      }
    },
    methods: {
      somethings (value) {
        if (value.handleType === 'sendCode') {
          let formlist = this.setOrChange ? this.formList : this.setFormList
          this.sendCode(value, formlist)
        }
      },
      sendCode (item, payType) { // 发送验证码
        let data = {}
        if (payType[item.name].startTime) return false
        data.operationType = payType[item.name].operationType
        payType[item.name].startTime = true // 开启倒计时
        if (this.userinfo.isOpenMobileCheck === 1) {
          this.commonHttp.smsValidCode(data).then((data) => {
            if (data.code === '0') {
              this.$store.dispatch('setTipState', this.Internationalization.passCode)
            } else {
              payType.smsAuthCode.startTime = false  // 关闭倒计时
              this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
            }
          })
        } else if (this.userinfo.email) {
          this.commonHttp.emailVaildCode(data).then((data) => {
            if (data.code === '0') {
              this.$store.dispatch('setTipState', this.$t('personal.text_8'))
            } else {
              payType.emailValidCode.startTime = false // 关闭倒计时
              this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
            }
          })
        }
      },
      submit () {
        let data = {}
        let fla = true
        let passwordReg = /^\d{6}$/
        if (!this.setOrChange) {
          for (let item in this.setFormList) { // 设置密码
            if (this.setFormList[item].value !== undefined && !this.setFormList[item].value) {
              this.$set(this.setFormList[item], 'errorInfo', this.$t('personal.text_7') + this.setFormList[item].title)
              fla = false
            } else {
              data[item] = this.setFormList[item].value
            }
          }
        } else {
          for (let item in this.formList) { // 修改密码
            if (this.formList[item].value !== undefined && !this.formList[item].value) {
              this.$set(this.formList[item], 'errorInfo', this.$t('personal.text_7') + this.formList[item].title)
              fla = false
            } else {
              data[item] = this.formList[item].value
            }
          }
        }
        // 判断密码是否正确
        if (data.newExPword && !passwordReg.test(data.newExPword)) {
          this.$set(this.formList['newExPword'], 'errorInfo', this.Internationalization.mustSixNum)
          this.$set(this.setFormList['newExPword'], 'errorInfo', this.Internationalization.mustSixNum)
          fla = false
        }
        if (!fla) return false
        let dataObj = {}
        if (!this.setOrChange) { // 设置密码
          if (this.userinfo.googleStatus === 1) {
            dataObj = {exchangeCode: data.newExPword, smsAuthCode: data.googleCode, authType: 1}
          } else if (this.userinfo.isOpenMobileCheck === 1) {
            dataObj = {exchangeCode: data.newExPword, smsAuthCode: data.smsAuthCode, authType: 2}
          } else if (this.userinfo.email) {
            dataObj = {exchangeCode: data.newExPword, smsAuthCode: data.emailValidCode, authType: 3}
          }
          this.submitInpInfo(dataObj)
        } else { // 修改密码
          if (this.userinfo.googleStatus === 1) { // oldexchangeCode: data.exPword,
            dataObj = {exchangeCode: data.newExPword, smsAuthCode: data.googleCode, authType: 1}
          } else if (this.userinfo.isOpenMobileCheck === 1) {
            dataObj = {exchangeCode: data.newExPword, smsAuthCode: data.smsAuthCode, authType: 2}
          } else if (this.userinfo.email) {
            dataObj = {exchangeCode: data.newExPword, smsAuthCode: data.emailValidCode, authType: 3}
          }
          this.verifyLoginPassword(dataObj, data.loginPwd)
        }
      },
      goBack () {
        this.$router.go(-1)
      },
      textOrPassword () {
        if (this.setOrChange) {
          this.formList.loginPwd.formType = this.formList.loginPwd.formType === 'password' ? 'text' : 'password'
          this.formList.newExPword.formType = this.formList.newExPword.formType === 'password' ? 'text' : 'password'
        } else {
          this.setFormList.newExPword.formType = this.setFormList.newExPword.formType === 'password' ? 'text' : 'password'
        }
      },
      // 关于登陆密码 的校验
      verifyLoginPassword (dataObj, loginPwd) {
        if (!this.secondClick) {
          return false
        }
        this.secondClick = false
        this.axios({
          url: this.$store.state.url.transactionUrl.verify_login_password,
          headers: {},
          method: 'POST',
          params: {
            loginPassword: loginPwd
          }
        }).then(res => {
          this.secondClick = true
          if (res.code.toString() === '0') {
            this.submitInpInfo(dataObj)
          } else {
            this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
          }
        })
      },
      // 提交表单 给后台
      submitInpInfo (dataObj) {
        this.secondClick = false
        this.axios({
          url: this.sendUrl,
          headers: {},
          params: dataObj,
          method: 'post'
        }).then((data) => {
          this.secondClick = true
          if (data.code.toString() === '0') {
            this.$router.push('/personal/securityCenter')
            this.$store.dispatch('setTipState', this.$t('personal.submitCuccess'))
          } else {
            this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
          }
        })
      }
    }
  }
</script>

